<template>
<div id="goods">
      <ul class="header__tab">
        <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == 'all'}" @click="setSearchType('all')">全部</li>
        <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == 'Sale'}" @click="setSearchType('Sale')">售卖中</li>
        <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == 'Lower'}" @click="setSearchType('Lower')">售完下架</li>
        <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == 'my_Lower'}" @click="setSearchType('my_Lower')">我下架的</li>
        <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == 'no_Lower'}" @click="setSearchType('no_Lower')">未上架的</li>
        <!-- <li class="header__tab__item" :class="{'header__tab__item__active': queryData.orderStatus == '4'}" @click="setSearchType('4')">已完成</li> -->
      </ul>
    <el-main>
        <div class="search">
            <el-form :inline="true" class="demo-form-inline" size="small">
                <el-form-item label="商品名称" class="search_name">
                    <el-input v-model="goodsName" placeholder="输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="价格" class="search_price">
                    <el-input v-model="startPrice" placeholder="单行输入" class="search_price_start"></el-input> 到
                    <el-input v-model="endPrice" placeholder="单行输入" class="search_price_end"></el-input>
                </el-form-item>
                <el-form-item label="店铺分类">
                    <el-cascader expand-trigger="hover" change-on-select :props="shopProps" :options="shopSort" v-model="selectedShopSort" placeholder="请选择" clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="resGoodsList(1)">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="toolbar">
            <el-button type="info" plain size="mini" @click.native="delGoods">删除</el-button>
            <el-button type="info" plain size="mini" @click.native="updateIsOnSale(2)">上架</el-button>
            <el-button type="info" plain size="mini" @click.native="updateIsOnSale(3)">下架</el-button>
        </div>
        <el-table :data="goodsList" :height="getTableHeight" style="width: 100%"
          :default-sort="{prop: 'sales', order: 'descending'}"
          @sort-change="getSortList"
          @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="商品图片">
                <template slot-scope="scope">
                  <img :src="scope.row.goodsImg" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称">
            </el-table-column>
            <el-table-column prop="id" label="商品ID">
            </el-table-column>
            <el-table-column label="审核状态">
                <template slot-scope="scope">
                    <span :class="{checkFail:scope.row.isCheck=='0',checking:scope.row.isCheck=='1'}">{{scope.row.isCheck==1?'已审核':'未审核'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="shopPrice" label="价格" sortable>
            </el-table-column>
            <el-table-column prop="goodsNumber" label="库存" sortable>
            </el-table-column>
            <el-table-column prop="sales" label="销量" sortable>
            </el-table-column>
            <el-table-column prop="addTime" label="上架时间" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <nuxt-link :to="`/goods/addGoods/${scope.row.id}`" tag="span" class="oper pointer">编辑</nuxt-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-show="pageData.total>0" layout="prev, pager, next"
            @current-change="resGoodsList"
            :page-size="pageData.pageSize"
            :current-page="pageData.pageNum"
            :total="pageData.total">
          </el-pagination>
        </div>
    </el-main>
</div>
</template>

<script>
import { getShopCategoryList, } from '~/api/'
import { findGoodsList, deleteGoods, updateIsOnSale } from "~/api/apiv1"
import { searchOption } from "~/utils/"
export default {
    data() {
      return {
        goodsName: '',
        startPrice: '',
        endPrice: '',
        selGoods: [],
        rankName: 'sales',
        rank: 2,
        queryData: {
          orderStatus: 'all',//all:全部,Sale:售卖中,Lower:售完下架,my_Lower :我下架的,no_Lower:未上架的
        },
        //选择店铺分类
        selectedShopSort: [],
        shopProps: {
          value: 'id',
          children: 'childList',
          label: 'name'
        }
      }
    },
    async asyncData({ app }) {
      try {
        const [res1, res2] = await Promise.all([findGoodsList(app), getShopCategoryList(app)])
        if (res1.code == '0' && res2.code == '0') {
          const { pageNum, pageSize, total, totalNum, list } = res1.data.page
          return {
            goodsList: list,
            shopSort: searchOption(res2.data.tree),
            pageData: { pageNum, pageSize, total, totalNum }
          }
        }else {
          return {
            goodsList: [],
            shopSort: [],
            pageData: {
              pageNum: 1,
              pageSize: 15,
              total: 0,
              totalNum: 1
            },
            message: res1.message == 'Success' ? res2.message : res1.message
          }
        }
      } catch (error) {
        console.error(`获取商品列表接口错误，错误信息${error}`)
      }
    },
    methods: {
      async updateIsOnSale(isOnSale) {
        if (this.selGoods.length==0) return
        let ids = []
        this.selGoods.map(item => {
          ids.push(item.id)
        })
        const res = await updateIsOnSale(this, ids, isOnSale)
        if (res.code != '0') return this.$message.error(res.message)
        this.$message.success('操作成功')
        this.resGoodsList(this.pageData.pageNum)
      },
      async resGoodsList(page) {
          const isOnSale = this.queryData.orderStatus=='no_Lower'?1:''
          const isReal = this.queryData.orderStatus=='Sale'?1:(this.queryData.orderStatus=='Lower'?2:(this.queryData.orderStatus=='my_Lower'?3:''))
          const shopId = this.selectedShopSort[this.selectedShopSort.length-1]
          const res = await findGoodsList(this,this.goodsName,this.startPrice,this.endPrice,isOnSale,isReal,shopId,'', page, 15, this.rankName, this.rank)
          if (res.code === '0') {
            const { pageNum, pageSize, total, totalNum, list } = res.data.page
            this.goodsList = list
            this.pageData = {pageNum, pageSize, total, totalNum}
          } else {
              this.$message.error(res.message)
          }
      },
      setSearchType(status){
          this.queryData.orderStatus = status
          this.resGoodsList(1)
      },
      handleSelectionChange(val) {
          this.selGoods = val
      },
      getSortList ({prop, order}) {
        this.rankName = prop
        this.rank = order == 'descending' ? 2 : 1
        this.resGoodsList(1)
      },
      async delGoods() {
        if (this.selGoods.length == 0) return
        let ids = []
        this.selGoods.map(item => {
          ids.push(item.id)
        })
        const res = await deleteGoods(this, ids)
        console.log(res)
        if (res.code === '0') {
          this.$message.success('删除成功')
          console.log(this.pageData.pageNum)
          const pageNum = ids.length>=this.goodsList.length ? this.pageData.pageNum-1 : this.pageData.pageNum
          this.resGoodsList(pageNum)
        } else {
          this.$message.error(res.message)
        }
      }
    },
    computed: {
      getTableHeight () {
        return this.$store.state.innerHeight-291
      }
    }
}
</script>


<style lang="scss" scoped>
#goods {
    // height: 100%;
    & /deep/ {
        .el-header {
            height: 90px !important;
            width: 100%;
            line-height: 88px;
            border-bottom: 1px solid #ddd;
            padding-left: 28px;
            position: fixed;
            top: 0;
            z-index: 1;
            background: #fff;
            ul {
                list-style: none;
                li {
                    float: left;
                    margin-right: 50px;
                    cursor: pointer;
                    width: 65px;
                    text-align: center;
                }
                .cur_tab {
                    border-bottom: 1px solid #409eff;
                    color: #409eff;
                }
            }
        }
        .el-main {
            height: 100%;
            padding: 0;
            .search {
                padding: 30px 0 30px 30px;
                .el-form-item {
                    margin-right: 35px;
                }
                &_name {
                    input {
                        width: 150px;
                    }
                }
                &_price {
                    display: flex;
                    .el-form-item__content {
                        display: flex;
                    }
                    input {
                        width: 100px;
                    }
                    &_start {
                        margin-right: 20px;
                    }
                    &_end {
                        margin-left: 20px;
                    }
                }
                form {
                    display: flex;
                    align-items: center;
                    input {
                        height: 32px !important;
                    }
                }
            }
            .toolbar {
                margin: 0 0 10px 60px;
                button {
                    margin-right: 20px;
                }
            }
            .el-table {
                img {
                    width: 54px;
                    height: 83px;
                }
                .oper {
                    color: #409eff
                }
                .checking {
                    color: #7AD6B4
                }
                .checkFail {
                    color: red;
                }
            }
            .pagination {
                text-align: center;
                 background-color: #fff;
                 padding: 15px;
            }
        }
    }
}
</style>
